<template>
  <div class="notice" :style="'width:' + width + 'px'">
    <div class="notice-head">
      <div class="custom" @click="customList">自定义列表</div>
      <div class="btn">
        <el-checkbox v-model="hiddenRecord" @change="hiddenState">隐藏已完成/恢复记录</el-checkbox>
        <el-button class="step" v-has="'maintenanceApp:warningNotice:export'" @click="exportData">导出</el-button>
      </div>
    </div>
    <div class="notice-con" v-has="'maintenanceApp:warningNotice:list'">
      <div class="con-table-head">
        <el-select
          class="selectWidth"
          clearable
          @clear="updateTable"
          v-model="warningType"
          @change="updateTable"
          placeholder="请选择报警类型"
        >
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select
          class="selectWidth step"
          clearable
          @clear="updateTable"
          v-model="warningLevel"
          @change="updateTable"
          placeholder="请选择报警等级"
        >
          <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select
          class="selectWidth step"
          clearable
          @clear="updateTable"
          v-model="warningProgress"
          @change="updateTable"
          placeholder="请选择处理进度"
        >
          <el-option v-for="item in progressList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          class="step"
          @change="updateTable"
          v-model="dateTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          clearable
          @clear="updateTable"
        >
        </el-date-picker>
        <el-input
          class="inputWidth step"
          v-model="searchText"
          @keyup.enter.native="updateTable"
          placeholder="输入故障名称,代码或者设备编号查找"
          clearable
          @clear="updateTable"
        ></el-input>
      </div>
      <!--表格-->
      <div class="con-table-con">
        <list-table
          ref="noticeList"
          v-if="showTable"
          :listUrl="'maintenance/getAlarmNoticeList'"
          :useOrder="true"
          :usePage="true"
          :maxHeight="tableHeight"
          :maxWidth="width"
          :rowClick="{ callback: '' }"
          :columnName="columnNames"
          :expanedParam="expanedParam"
        >
          <template v-slot:actionButton>
            <el-table-column label="操作" align="left" fixed="right" width="150">
              <template slot-scope="scope">
                <div class="buttons">
                  <div class="item" v-show="scope.row.status === 1">
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:warningNotice: confirm')"
                      @click="confrimNotice(scope.row.id)"
                      >确认通知</span
                    >
                  </div>
                  <div class="item" v-show="scope.row.status === 2">
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:warningNotice: detail')"
                      @click="confrimNotice(scope.row.id)"
                      >详情</span
                    >
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:warningNotice: transOrder')"
                      @click="transOrder(scope.row)"
                      >转工单</span
                    >
                    <el-popover
                      popper-class="sc-customer-operate-popper"
                      placement="bottom"
                      width="176"
                      trigger="hover"
                    >
                      <div class="btns">
                        <!-- <span
                          class="pop-txt"
                          v-if="checkPermission('maintenanceApp:warningNotice: ignore')"
                          @click="ignoreData(scope.row)"
                          >忽略</span
                        > -->
                        <span
                          class="pop-txt"
                          v-if="checkPermission('maintenanceApp:warningNotice: delay')"
                          @click="delayData(scope.row)"
                          >延时</span
                        >
                      </div>
                      <div class="more" slot="reference">...</div>
                    </el-popover>
                  </div>
                  <div class="item" v-show="scope.row.status === 3 || scope.row.status === 5">
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:warningNotice: orderDetail')"
                      @click="showOrderDetail(scope.row.orderId)"
                      >工单详情</span
                    >
                  </div>
                  <div class="item" v-show="scope.row.status === 6 || scope.row.status === 7">
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:warningNotice: detail')"
                      @click="showNoticeDetail(scope.row.id)"
                      >详情</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </template>
        </list-table>
      </div>
    </div>

    <!--对话框-->
    <!--自定义列表-->
    <el-dialog title="自定义列表" width="32%" :visible.sync="dialogTableVisible" :modal-append-to-body="false">
      <el-checkbox-group v-model="fieldBoxList">
        <div class="box-list">
          <el-checkbox
            v-for="(item, index) in boxList"
            :key="'box_' + index"
            :label="item.label"
            :disabled="item.disabled"
            @change="fieldClick(item.val)"
          ></el-checkbox>
        </div>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindField">确 定</el-button>
      </div>
    </el-dialog>
    <!--延时-->
    <el-dialog title="延时通知" width="20%" :visible.sync="dialogDelayVisible" :modal-append-to-body="false">
      <div class="delay-content">
        <div class="delay-txt">到达时间点后，再次监测故障是否已恢复，如果已恢复，则不再通知，否则继续推送通知。</div>
        <el-form ref="delayForm" :model="delayForm" :rules="delayRule">
          <el-form-item label="延时" prop="time">
            <div class="form-item">
              <el-input class="form-input" type="number" v-model="delayForm.time"></el-input>
              <div class="unit">分钟</div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelayVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelay">确 定</el-button>
      </div>
    </el-dialog>
    <!--报警通知详情-->
    <el-dialog title="报警通知详情" width="50%" :visible.sync="dialogDetailVisible" :modal-append-to-body="false">
      <div class="d-dialog-title">
        <span class="name">{{ detailData.deviceName }}</span>
        <span class="number">( {{ detailData.productNumber }} )</span>
      </div>
      <div class="d-dialog-con">
        <div class="con-item">
          <div class="item deep">通知类型</div>
          <div class="item2">{{ detailData.type === 1 ? '报警' : '恢复' }}</div>
          <div class="item deep">报警等级</div>
          <div class="item2">{{ detailLevelList[detailData.grade - 1] }}</div>
          <div class="item deep">故障代码</div>
          <div class="item2">{{ detailData.errorCode }}</div>
          <div class="item deep">通知时间</div>
          <div class="item2">{{ parseTime(detailData.time) }}</div>
        </div>
        <div class="con-item">
          <div class="item deep">合同编号</div>
          <div class="item2">{{ detailData.protocol }}</div>
          <div class="item deep">产线编号</div>
          <div class="item2">{{ detailData.productNumber }}</div>
          <div class="item deep">产线识别号</div>
          <div class="item2">{{ detailData.identificationNumber }}</div>
          <div class="item deep">设备型号</div>
          <div class="item2">{{ detailData.deviceNumber }}</div>
        </div>
        <div class="con-item">
          <div class="item deep">所属公司</div>
          <div class="big-item">{{ detailData.company }}</div>
        </div>
        <div class="con-item">
          <div class="item deep">设备地址</div>
          <div class="big-item">{{ detailData.deviceAddress }}</div>
        </div>
        <div class="con-item">
          <div class="item deep">故障名称</div>
          <div class="big-item">{{ detailData.errorName }}</div>
        </div>
        <div class="con-item">
          <div class="item deep">故障描述</div>
          <div class="big-item">{{ detailData.errorDesc }}</div>
        </div>
      </div>
      <div slot="footer" v-if="!showDetail" class="dialog-footer">
        <el-button
          v-if="detailData.status === 1 && checkPermission('maintenanceApp:warningNotice: confirm')"
          type="primary"
          @click="submitConfirm"
          >确认通知</el-button
        >
        <template v-if="detailData.status === 2">
          <el-button
            type="primary"
            v-if="checkPermission('maintenanceApp:warningNotice: transOrder')"
            @click="transOrder"
            >转工单</el-button
          >
          <!-- <el-button class="point" @click="ignoreData" v-if="checkPermission('maintenanceApp:warningNotice: ignore')"
            >忽略</el-button
          > -->
          <el-button class="point" @click="delayData" v-if="checkPermission('maintenanceApp:warningNotice: delay')"
            >延时</el-button
          >
        </template>
      </div>
    </el-dialog>
    <transform-dialog @callback="$refs.noticeList.getListData()" ref="transform"></transform-dialog>
    <order-detail ref="detailDialog"></order-detail>
  </div>
</template>
<script>
import ListTable from '../../components/ListTable.vue';
import OrderDetail from './dialog/orderDetail.vue';
import TransformDialog from './dialog/transformDialog.vue';
import {
  getSpecificationdata,
  getCustomField,
  delayData,
  ignoreNotice,
  getAlarmDetail,
  getConfrimInfo,
  setCustomField,
  confrimInfo,
  getLinkePerson
} from '../../api/notice';
import checkBtnPermission from '@/utils/checkBtnPermission';
import XLSX from 'xlsx';
export default {
  components: { ListTable, TransformDialog, OrderDetail },
  name: 'warningNotice',
  data() {
    return {
      hiddenRecord: false, // 隐藏状态
      warningType: '', // 报警类型
      typeList: [
        { label: '报警', value: 1 },
        { label: '恢复', value: 2 }
      ], // 报警类型数组
      warningLevel: '', // 报警等级
      levelList: [
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
        { label: '四级', value: 4 },
        { label: '五级', value: 5 }
      ], // 等级数组
      searchText: '', // 搜索
      width: 0,
      warningProgress: '', // 处理进度
      progressList: [
        { label: '待确认', value: 1 },
        { label: '待处理', value: 2 },
        { label: '处理中', value: 3 },
        // { label: '延时处理', value: 4 },
        { label: '处理完成', value: 5 },
        { label: '已恢复', value: 6 }
        // { label: '已忽略', value: 7 }
      ], // 进度列表
      detailLevelList: ['一级', '二级', '三级', '四级', '五级'],
      dateTime: '', // 筛选时间
      dialogTableVisible: false, // 自定义列表对话框
      checkBoxList: ['errorName', 'errorCode'], // 自定义列表字段展示
      fieldBoxList: ['故障代码', '故障名称'],
      tableHeight: 0, // 表格高度
      columnNames: {}, // 表格字段
      expanedParam: {}, // 表格参数
      showTable: false, // 是否渲染表格
      dialogDetailVisible: false, // 报警详情
      detailData: {}, //报警通知详情
      dialogDelayVisible: false, // 延时
      showDetail: false, // 查看详情
      delayForm: {},
      delayRule: {
        time: [{ required: true, message: '请输入延时时间', trigger: 'blur' }]
      },
      columnNameList: {
        // 全部字段
        time: {
          type: 'date',
          name: '通知时间',
          sortable: true,
          width: '180'
        },
        type: {
          type: 'alarm',
          name: '报警类型',
          sortable: true
        },
        errorCode: '故障代码',
        errorName: '故障名称',
        grade: {
          type: 'level',
          name: '报警等级',
          sortable: true
        },
        errorDesc: {
          name: '故障描述',
          useTip: true
        },
        status: {
          type: 'status',
          name: '处理进度',
          sortable: true
        },
        productNumber: '产线编号',
        company: {
          name: '所属公司',
          useTip: true
        },
        modelName: {
          name: '设备型号'
        },
        deviceNumber: '设备编号',
        deviceName: {
          name: '设备名称',
          useTip: true
        },
        topid: {
          type: 'deviceType',
          name: '设备类型'
        }
      }
    };
  },
  computed: {
    // 字段列表
    boxList: () => [
      { label: '故障代码', val: 'errorCode', disabled: true },
      { label: '故障名称', val: 'errorName', disabled: true },
      { label: '报警类型', val: 'type', disabled: false },
      { label: '设备编号', val: 'deviceNumber', disabled: false },
      { label: '设备名称', val: 'deviceName', disabled: false },
      { label: '设备型号', val: 'modelName', disabled: false },
      { label: '故障描述', val: 'errorDesc', disabled: false },
      { label: '所属公司', val: 'company', disabled: false },
      { label: '产线编号', val: 'productNumber', disabled: false },
      { label: '处理进度', val: 'status', disabled: false },
      { label: '通知时间', val: 'time', disabled: false },
      { label: '设备类型', val: 'topid', disabled: false },
      { label: '报警等级', val: 'grade', disabled: false }
    ]
  },
  created() {
    window.onresize = () => {
      return (() => {
        this.getContentHeight();
      })();
    };
  },
  mounted() {
    this.getContentHeight();
    this.getField();
  },
  methods: {
    // 检查
    checkPermission(name) {
      return checkBtnPermission(name);
    },
    // 隐藏状态
    hiddenState() {
      this.expanedParam.hide = this.hiddenRecord ? '1' : '0';
      this.$refs.noticeList.getListData();
    },
    // 转化时间
    parseTime(date) {
      let time = date || '';
      const year = time.match(/^\d{4}-\d{1,2}-\d{1,2}/g);
      const second = time.match(/\d{1,2}:\d{1,2}:\d{1,2}/g);
      return year + ' ' + second;
    },
    // 查看通知详情
    showNoticeDetail(id) {
      getConfrimInfo({ id: id }).then(res => {
        this.detailData = res.data;
        this.showDetail = true;
        this.dialogDetailVisible = true;
      });
    },
    // 自定义列表
    customList() {
      this.dialogTableVisible = true;
    },
    // 字段点击
    fieldClick(res) {
      if (this.checkBoxList.indexOf(res) > -1) {
        this.checkBoxList = this.checkBoxList.filter(item => item !== res);
      } else {
        this.checkBoxList.push(res);
      }
    },
    // 忽略
    ignoreData(row) {
      this.$confirm('故障通知忽略后，系统不再后续通知是否恢复，确定要忽略？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(() => {
          let id = '';
          if (row.id) {
            id = row.id;
          } else {
            id = this.detailData.id;
          }
          ignoreNotice({ id: id }).then(res => {
            this.$message({
              type: 'success',
              message: '已忽略!'
            });
            this.dialogDetailVisible = false;
            this.$refs.noticeList.getListData();
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 延时
    delayData(row) {
      this.dialogDetailVisible = false;
      if (!this.detailData.id) this.detailData.id = row.id;
      this.dialogDelayVisible = true;
    },
    // 确认延时
    confirmDelay() {
      this.$refs.delayForm.validate(res => {
        if (res) {
          delayData({
            id: this.detailData.id,
            time: parseInt(this.delayForm.time),
            errorCode: this.detailData.errorCode
          }).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.dialogDelayVisible = false;
            this.dialogDetailVisible = false;
            this.$refs.noticeList.getListData();
          });
        }
      });
    },
    // 获取自定义列表
    getField() {
      getCustomField().then(res => {
        const list = res.data;
        let temp = {};
        list.forEach(item => {
          const val = this.columnNameList[item];
          temp[item] = val;
          if (this.checkBoxList.indexOf(item) < 0) {
            this.checkBoxList.push(item);
          }
          if (typeof val === 'string') {
            this.fieldBoxList.push(val);
          } else {
            this.fieldBoxList.push(val.name);
          }
        });
        this.columnNames = temp;
        this.showTable = true;
      });
    },
    // 更新列表
    updateTable() {
      this.expanedParam.status = this.warningProgress;
      this.expanedParam.grade = this.warningLevel;
      this.expanedParam.type = this.warningType;
      if (this.dateTime.length > 0) {
        this.expanedParam.beginTime = this.getTime(this.dateTime[0]);
        this.expanedParam.endTime = this.getTime(this.dateTime[1]);
      }
      this.expanedParam.keyword = this.searchText;
      this.$refs.noticeList.getListData();
    },
    // 获取时间
    getTime(time) {
      return `${time.getFullYear()}-${
        time.getMonth() + 1
      }-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    },
    // 绑定字段
    bindField() {
      setCustomField({ list: this.checkBoxList }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.dialogTableVisible = false;
        this.showTable = false;
        this.getField();
      });
    },
    // 查看确认通知信息
    confrimNotice(id) {
      getConfrimInfo({ id: id }).then(res => {
        this.detailData = res.data;
        this.showDetail = false;
        this.dialogDetailVisible = true;
      });
    },
    // 确认通知
    submitConfirm() {
      confrimInfo({ id: this.detailData.id, errorCode: this.detailData.errorCode }).then(res => {
        this.$message({
          type: 'success',
          message: '已确认'
        });
        this.$refs.noticeList.getListData();
        this.showDetail = true;
        this.dialogDetailVisible = false;
      });
    },
    // 高度
    getContentHeight() {
      const main = document.querySelector('.main');
      const mainHeight = main ? main.getBoundingClientRect().height : 0;
      const title = document.querySelector('.page-title');
      const titleHeight = title ? title.getBoundingClientRect().height : 0;
      this.tableHeight = mainHeight - titleHeight - 152 - 45;
      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let mainContentWidth = winInnerWidth - sidebarWidth - 30;
      mainContentWidth = mainContentWidth < 1030 ? 1030 : mainContentWidth;
      // 表格宽度
      this.width = mainContentWidth;
    },
    // 转工单
    transOrder(row) {
      const transform = this.$refs.transform;
      if (row.id) {
        getConfrimInfo({ id: row.id }).then(res => {
          this.dialogDetailVisible = false;
          this.getLinkPerson(res.data);
          this.detailData = res.data;
        });
      } else {
        this.dialogDetailVisible = false;
        transform.translateForm.deviceName = this.detailData.deviceName;
        transform.translateForm.deviceNumber = this.detailData.deviceNumber;
        transform.translateForm.errorCode = this.detailData.errorCode;
        transform.translateForm.errorName = this.detailData.errorName;
        transform.translateForm.protocol = this.detailData.protocol;
        transform.translateForm.device_id = this.detailData.deviceId;
        transform.translateForm.id = this.detailData.id;
        this.$refs.transform.dialogOrderVisible = true;
      }
    },
    // 获取联系人
    getLinkPerson(detail) {
      const transform = this.$refs.transform;
      getLinkePerson({ device_id: detail.deviceId }).then(res => {
        transform.translateForm.contacts = res.data.contacts;
        transform.translateForm.contacts_tel = res.data.contacts_tel;
        transform.translateForm.deviceName = this.detailData.deviceName;
        transform.translateForm.deviceNumber = this.detailData.deviceNumber;
        transform.translateForm.errorCode = this.detailData.errorCode;
        transform.translateForm.errorName = this.detailData.errorName;
        transform.translateForm.protocol = this.detailData.protocol;
        transform.translateForm.device_id = this.detailData.deviceId;
        transform.translateForm.id = this.detailData.id;
        this.$nextTick(res => {
          console.log(detail);
          this.$refs.transform.dialogOrderVisible = true;
        });
      });
    },
    // 查看工单详情
    showOrderDetail(id) {
      getAlarmDetail({ id: id }).then(res => {
        const detail = this.$refs.detailDialog;
        detail.detailInfo = res.data;
        const proList = res.data.processing_list;
        let temp = [];
        proList.forEach(item => {
          const content = item.operate_content ? JSON.parse(item.operate_content) : [];
          content.forEach(con => {
            if (/^\[/.test(con.content)) {
              const contentData = JSON.parse(con.content);
              if (contentData.length > 0) {
                if (typeof contentData[0] === 'string') {
                  con.htmlType = 2;
                } else {
                  if (contentData[0].name) {
                    con.htmlType = 4;
                  } else {
                    con.htmlType = 1;
                  }
                }
              } else {
                con.htmlType = 3;
              }
              con.content = contentData;
            } else {
              con.htmlType = 3;
            }
          });
          item.operate_content = content;
          temp.push(item);
        });
        detail.stateList = temp;
        this.$nextTick(res => {
          detail.dialogWorkVisible = true;
        });
      });
    },
    // 导出
    exportData() {
      getSpecificationdata({ page: 1, page_size: 999 }).then(res => {
        const list = res.data.list;
        const pross = ['待确认', '待处理', '处理中', '延时处理', '处理完成', '已恢复'];
        let type = {
          1: '搬运类',
          2: '输送类',
          3: '包装类',
          4: '其他类'
        };
        list.forEach(item => {
          item.type = item.type === 1 ? '报警' : '恢复';
          item.status = pross[item.status - 1];
          item.topid = type[item.topid];
          item.time = this.parseTime(item.time);
        });
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../plugins/Export2Excel.js');
          const tHeader = [];
          const filterVal = [];
          Object.keys(this.columnNames).forEach(key => {
            const val = this.columnNames[key];
            filterVal.push(key);
            if (typeof val === 'object') {
              tHeader.push(val.name);
            } else {
              tHeader.push(val);
            }
          });
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '报警通知');
        });
      });
    },
    // 格式化json
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
  }
};
</script>
<style lang="scss" scoped>
// 通用
.selectWidth {
  width: 200px;
}
.timeWidth {
  width: 320px;
}
.inputWidth {
  width: 300px;
}
.step {
  margin-left: 10px;
}
.deep {
  background: #f2f6fc;
  font-size: 12px;
  color: #909399;
}

.text-con {
  .text {
    margin-left: 10px;
  }
}

.more {
  font-size: 14px;
  font-weight: 600;
  transform: rotate(90deg);
  margin-left: 20px;
  letter-spacing: 1px;
  text-align: center;
  color: #c0c4cc;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.btns {
  display: flex;
  flex-direction: column;
  .pop-txt {
    font-size: 14px;
    height: 34px;
    display: block;
    line-height: 34px;
    cursor: pointer;
  }
}

.delay-content {
  display: flex;
  flex-direction: column;
  .delay-txt {
    color: #ffb039;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 20px;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  font-size: 12px;
  color: #3378ff;
  cursor: pointer;
}

.point {
  cursor: pointer;
}

// 对话框样式
.d-dialog-title {
  width: 100%;
  text-align: center;
  .name {
    color: #3378ff;
    font-size: 20px;
  }
  .number {
    color: #909399;
    font-size: 16px;
  }
}
.d-dialog-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  .con-form {
    width: 100%;
  }
  .con-item {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #f2f6fc;
    border-right: 1px solid #f2f6fc;
    border-left: 1px solid #f2f6fc;
    &:last-child {
      border-bottom: 1px solid #f2f6fc;
    }
    .item {
      flex: 1.5;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
    }
    .item2 {
      flex: 2;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      color: #606266;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .big-item {
      flex: 13.8;
      line-height: 40px;
      font-size: 12px;
      padding-left: 10px;
      max-height: 120px;
      overflow: auto;
    }
  }
}

.form-item {
  flex: 1;
  display: flex;
  .form-input {
    flex: 8;
  }
  .unit {
    flex: 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    background: #f5f7fa;
  }
}

.box-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

// 主体样式
.notice {
  width: calc(100% - 17px);
  .notice-head {
    height: 76px;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    .custom {
      color: #3378ff;
      background: #ffffff;
      border: 1px solid #85aeff;
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 14px;
      padding: 9px 20px;
      cursor: pointer;
    }
    .btn {
      color: #606266;
      font-size: 14px;
    }
  }
  .notice-con {
    padding: 0 20px;
    .con-table-head {
      height: 76px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
